import React,{useState,useEffect} from 'react';
import TimeSharingChart from '../../components/TickChart2.tsx';



interface TimeSharingData {
  timestamp: number;
  price: number;
  volume: number;
  avgPrice?: number;
  preClose: number;
}
const MarketStructurePage: React.FC = () => {

  const [timeSharingData, setTimeSharingData] = useState<TimeSharingData[]>([]);

  useEffect(() => {
    // 生成示例数据
    const generateSampleData = (): TimeSharingData[] => {
      const preClose = 100;
      const data: TimeSharingData[] = [];
      const startTime = new Date().setHours(9, 30, 0, 0);
      
      for (let i = 0; i < 240; i++) {
        const timestamp = startTime + i * 60 * 1000;
        const randomChange = (Math.random() - 0.5) * 4;
        const price = preClose * (1 + randomChange / 100);
        
        data.push({
          timestamp,
          price: Number(price.toFixed(2)),
          volume: Math.floor(Math.random() * 10000) + 1000,
          preClose
        });
      }
      console.log('tick data = ',data)
      return data;
    };

    setTimeSharingData(generateSampleData());
  }, []);

  return (
    <div>
      <h2>股票分时图 (KlineCharts)</h2>
      <TimeSharingChart 
        data={timeSharingData}
        height={400}
        showAvgLine={true}
        showVolume={true}
      />
    </div>
  );
};



 

export default MarketStructurePage;